<template>
  <el-table :data="list" style="width: 100%;padding-top: 15px;">
    <el-table-column label="订单id" min-width="200">
      <template slot-scope="scope">
        {{ scope.row.orderId }}
      </template>
    </el-table-column>
<!--    <el-table-column label="用户id" width="195" align="center">
      <template slot-scope="scope">
        {{ scope.row.userId }}
      </template>
    </el-table-column>-->
    <el-table-column label="订单金额" width="195" align="center">
      <template slot-scope="scope">
        ¥{{ scope.row.totalAmount }}
      </template>
    </el-table-column>
    <el-table-column label="创建时间" width="195" align="center">
      <template slot-scope="scope">
        {{ scope.row.createTime | timestampToTime}}
      </template>
    </el-table-column>
    <el-table-column label="状态" width="100" align="center">
      <template slot-scope="{row}">
        <el-tag :type="row.orderState | statusFilter">
          {{ row.orderState | orderStateToStr }}
        </el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  import { getIndexInfoReq } from '@/api/index'

  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          0: 'warning',
          1: 'success',
          2: 'danger',
        }
        return statusMap[status]
      },
      orderStateToStr(status) {
        const statusMap = {
          0: '为支付',
          1: '已支付',
          2: '已取消',
        }
        return statusMap[status]
      },
      // 时间戳转换成时间
      timestampToTime (timestamp) {
        let date = new Date(timestamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        let Y = date.getFullYear() + '-'
        let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
        let D = date.getDate() + ' '
        let h = date.getHours() + ':'
        let m = date.getMinutes() + ':'
        let s = date.getSeconds()
        s = s < 10 ? '0' + s : s;
        return Y+M+D+h+m+s;
      },
    },
    data() {
      return {
        list: null
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        getIndexInfoReq().then(response => {
          console.log(response)
          if (response.state === true) {
            this.list = response.data.orderList
            console.log(this.list)
          }else{
            this.$notify.warning({title: '失败',message: response.message, duration: 1500});
          }
        })
      }
    }
  }
</script>

<style scoped>
  >>>.el-table--medium th, .el-table--medium td {
    padding: 10px 0;
  }
</style>
